import { defineComponent, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import LabelGroup from "@/components/LabelGroup";
import { ILabelProps } from "@/components/Label/types";
import Text from "@/components/Text";
import apiTool, { getSize } from "@/command/apiTool";
import Message from "@/components/Message";
import Search from "@/components/Search";
import FilterMenu from "@/components/FilterMenu";
import { IFilterMenuPropsData } from "@/components/FilterMenu/types";
import ListView from "@/components/ListView";
import GoodsListItem from "@/components/GoodsListItem";
import { Divider } from "vant";
export default defineComponent({
  name: "",
  setup() {
    const form = ref({});
    const render1 = () => {
      const body = () => {
        const data: ILabelProps[] = [
          {
            name: "保鲜",
            type: "blue",
          },
          {
            name: "果蔬",
            type: "yellow",
          },
        ];
        return (
          <div
            class="flex items-center pb-16 mx-[-10px] px-10"
            style={{ borderBottom: "1px solid #AFAFAF" }}
          >
            <img
              src="https://img0.baidu.com/it/u=2224195194,2552213713&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
              class={"w-[75px] h-[75px] rounded-6 bg-cover"}
            />
            <div class={"h-[75px] ml-11"}>
              <div
                class={"truncate text-[12px]"}
                style={{ color: "rgba(51, 51, 51, 1)" }}
              >
                宁波市镇海国振果蔬专业合
              </div>
              <LabelGroup data={data} class={"mt-4"} />
              <Text style={{ color: "rgba(153, 153, 153, 1)" }}>
                营业时间：08:00~20:00
              </Text>
              <Text style={{ color: "rgba(102, 102, 102, 1)" }}>
                宁波市-镇海区-九龙湖镇田顾工业区
              </Text>
            </div>
          </div>
        );
      };
      const foot = () => {
        const data = [
          {
            name: "面议",
            value: "价格",
          },
          {
            name: "80㎡",
            value: "冷库库容",
          },
          {
            name: "80㎡",
            value: "今日可租",
          },
          {
            name: "12",
            value: "预约次数",
          },
          {
            name: "148",
            value: "已租次数",
          },
        ];
        return (
          <div class={"flex items-center h-[64px] "}>
            {data.map((e) => {
              return (
                <div class={"flex flex-1 items-center justify-center flex-col"}>
                  <div class={"text-[13px]"} style={{ color: "#1989FA" }}>
                    {e.name}
                  </div>
                  <div class={"text-[13px] mt-6"} style={{ color: "#666666" }}>
                    {e.value}
                  </div>
                </div>
              );
            })}
          </div>
        );
      };
      return (
        <CardView
          title="我的冷库"
          class={"pb-0"}
          style={{ borderRadius: getSize(11) }}
        >
          {body()}
          {foot()}
        </CardView>
      );
    };
    const render2 = () => {
      return (
        <CardView title="最新快讯">
          <Message />
        </CardView>
      );
    };
    const renderItem = () => {
      const data = [
        {
          name: "距离",
          value: "13.5km",
        },
        {
          name: "共享余量",
          value: "40.5m",
        },
        {
          name: "价格",
          value: "面议",
        },
      ];
      const labelData: ILabelProps[] = [
        {
          name: "标签",
          type: "blue",
        },
      ];
      return (
        <div>
          <GoodsListItem
            img="https://img0.baidu.com/it/u=381455857,3136195082&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
            title="聚卿舫冷库#6"
            data={data}
            itemWidth="100%"
            labelData={labelData}
          />
          <Divider />
        </div>
      );
    };
    const render3 = () => {
      const data: IFilterMenuPropsData[] = [
        {
          title: "区域",
          type: "menu",
          key: "a1",
          data: [
            {
              text: "宁波",
              value: "1",
            },
          ],
        },
      ];
      return (
        <CardView title="冷库列表">
          <Search placeholder="请输入搜索关键词" />
          <FilterMenu
            data={data}
            form={form}
            class="havePt"
            choose={["area", "datePicker"]}
          />
          <ListView renderItem={renderItem} />
        </CardView>
      );
    };
    return () => {
      return (
        <PageTitle
          title="帮存储"
          bgColor={apiTool.getBackGroundColor()}
          childClass="m-child-top-20"
        >
          {render1()}
          {render2()}
          {render3()}
        </PageTitle>
      );
    };
  },
});
